<template>
  <div class="map">
    <div id="container"></div>
    <div class="gisMapRight">
      <!-- 上边三个工单统计表 -->
      <div class="ticketList">
        <div class="card">
          <div class="titleAndTings">
            <span>预警事件</span>
            <p>1091件</p>
          </div>
          <div class="tickePic"></div>
        </div>
        <div class="card">
          <div class="titleAndTings">
            <span>预警事件</span>
            <p>1091件</p>
          </div>
          <div class="tickePic"></div>
        </div>
        <div class="card">
          <div class="titleAndTings">
            <span>预警事件</span>
            <p>1091件</p>
          </div>
          <div class="tickePic"></div>
        </div>
      </div>
      <!-- 中间四个Echarts图表 -->
      <div class="middleList">
        <div id="table1" class="table_1"></div>
        <div id="table2" class="table_1"></div>
        <div id="table3" class="table_1"></div>
        <div id="table4" class="table_1"></div>
      </div>
      <div class="monTraffic" id="monTraffic"></div>
    </div>
  </div>
</template>
<script>
import styleJson from '../../../assets/json/map.json'
import p1 from '@/assets/logo.png'
// import './map'
export default {
  name: "Map",
  data() {
    return {
      zoom: 0,
      map: {},
      p1AddrssList: [
        { x: 108.972911, y: 34.230771 },
        { x: 108.979738, y: 34.225517 },
        { x: 108.982397, y: 34.222174 },
        { x: 108.965836, y: 34.225607 },
      ],
      p2AddrssList: [
        { x: 108.895585, y: 34.194947 },
        { x: 108.902197, y: 34.202711 },
        { x: 108.934679, y: 34.210952 },
        { x: 108.952789, y: 34.194352 },
        { x: 108.982397, y: 34.193395 },
        { x: 109.010712, y: 34.203427 },
        { x: 108.994327, y: 34.222413 },
        { x: 108.970755, y: 34.224204 },
      ],
      p2AddrssListColor: [
        {
          geometry: {
            type: "LineString",
            coordinates: [
              [108.895585, 34.194947],
              [108.902197, 34.202711],
              [108.934679, 34.210952],
              [108.952789, 34.194352],
              [108.982397, 34.193395],
              [109.010712, 34.203427],
              [108.994327, 34.222413],
              [108.970755, 34.224204],
            ],
          },
        },
      ],
    };
  },
  methods: {
    createDOM(config) {
      var canvas = document.createElement("canvas");
      var context = canvas.getContext("2d");
      var radius = 10;
      //创建构造函数Circle
      function Circle(x, y, radius) {
        this.xx = x; //在画布内随机生成x值
        this.yy = y;
        this.radius = radius;
      }
      Circle.prototype.radiu = function () {
        radius += 0.5; //每一帧半径增加0.5
        if (this.radius == 20) {
          // radius -= 0.5;
          // if(radius == 10){
          radius = 10;
          // }
        }
      };
      Circle.prototype.radiu2 = function () {
        radius2 -= 0.5; //每一帧半径增加0.5
        if (this.radius2 == 10) {
          // radius -= 0.5;
          // if(radius == 10){
          radius2 = 20;
          // }
        }
      };
      // 绘制圆形的方法
      Circle.prototype.paint = function () {
        context.beginPath();
        context.arc(this.xx, this.yy, 5, 0, Math.PI * 2);
        context.fillStyle = "rgba(220,20,60,1)"; //填充颜色,默认是黑色
        context.fill(); //画实心圆
        context.closePath();
        context.lineWidth = 2; //线条宽度
        context.strokeStyle = "rgba(220,20,60,1)"; //颜色
        context.stroke();
        // this.paintkong();
        this.paintkong(0);
        // this.paintkong(5);
        // this.paintkong(10);
      };
      Circle.prototype.paintkong = function (num) {
        context.beginPath();
        context.arc(this.xx, this.yy, this.radius + num, 0, Math.PI * 2);
        context.closePath();
        context.lineWidth = 1; //线条宽度
        context.strokeStyle = "rgba(220,20,60,1)"; //颜色
        context.stroke();
      };
      var newfun = null;
      function createCircles() {
        newfun = new Circle(50, 50, radius); //调用构造函数
        newfun.paint();
        newfun.radiu();
      }
      canvas.width = 100; //
      canvas.height = 100;
      var width = 100,
        height = 100;
      var backCanvas = document.createElement("canvas"),
        backCtx = backCanvas.getContext("2d");
      backCanvas.width = width;
      backCanvas.height = height;
      //设置主canvas的绘制透明度
      context.globalAlpha = 0.7;
      //显示即将绘制的图像，忽略临时canvas中已存在的图像
      backCtx.globalCompositeOperation = "copy";
      let render = function () {
        //先将主canvas的图像缓存到临时canvas中
        backCtx.drawImage(canvas, 0, 0, width, height);
        //清除主canvas上的图像
        context.clearRect(0, 0, width, height);
        //在主canvas上画新圆
        createCircles();
        //新圆画完后，再把临时canvas的图像绘制回主canvas中
        context.drawImage(backCanvas, 0, 0, width, height);
      };
      setInterval(render, 100);
      return canvas;
    },
    createDOM2(config) {
      var canvas = document.createElement("canvas");
      canvas.width = 100;
      canvas.height = 100;
      var p = [0.5];
      var ctx = canvas.getContext("2d");
      function asd() {
        var myAction = {
          draw: function (r) {
            ctx.clearRect(0, 0, 100, 100);

            ctx.save();

            ctx.lineWidth = 1;
            ctx.strokeStyle = "rgba(0, 255, 238, 1)";
            ctx.fillStyle = "rgba(0, 255, 238, 0.4)";
            ctx.beginPath();
            ctx.arc(50, 50, r[0] * 30, 0, 2 * Math.PI);
            ctx.fill();
            ctx.stroke();

            ctx.restore();
          },
          step: function () {
            var temp = [0];
            for (var i = 0; i < p.length; i++) {
              if (p[i] <= 0.98) {
                p[i] = p[i] + 0.02;
                temp[i] = p[i];
              } else if (p[i] <= 1.98) {
                p[i] = p[i] + 0.02;
                temp[i] = 2 - p[i];
              } else {
                p[i] = 0;
              }
            }
            myAction.draw(temp);
            setTimeout(function () {
              myAction.step();
            }, 50);
          },
        };

        var init = (function () {
          myAction.step();
        })();
      }
      asd();
      return canvas;
    },
    createBreathDOM(config) {
      /*
       *  selector:  canvas元素选择器
       *  x:绘制的圆形x轴位置
       *  y:绘制的圆y轴位置
       *  r:绘制圆的半径
       *  outColor: 外部圆颜色
       *  innerColor:内部圆颜色
       *  enlarge: 首次是放大还是缩小 默认缩小
       *  timer: 变化速度  默认值 100
       * */
      var canvas = document.createElement("canvas");
      var context = canvas.getContext("2d");
      let r = 10;
      let x = 50;
      let y = 50;
      let outColor = "rgba(210,246,4,1)";
      let innerColor = "rgba(210,246,4,1)";
      // let enlarge =
      // var radius = 10;
      // let radIsT = true
      //创建构造函数Circle
      // function Circle(x, y, radius) {
      //   this.xx = x; //在画布内随机生成x值
      //   this.yy = y;
      //   this.radius = radius;
      // }
      // Circle.prototype.radiu = function () {
      //   if(radIsT){
      //     radius += 0.5; //每一帧半径增加0.5
      //     if(this.radius == 20){
      //       radIsT = false
      //       radius = 20
      //     }
      //   }else if(!radIsT){
      //     radIsT -= 0.5
      //     if(this.radius == 10){
      //       radIsT = true
      //       radius = 10
      //     }
      //   }
      //   // radius += 0.5; //每一帧半径增加0.5
      //   // if (this.radius == 20) {
      //     // radius -= 0.5;
      //     // if(this.radius == 10)
      //     // radius = 10
      //     // if(radius == 10){
      //     // radius = 10;
      //     // }
      //   // }
      // };
      // Circle.prototype.radiu2 = function () {
      //   radius2 -= 0.5; //每一帧半径增加0.5
      //   if (this.radius2 == 10) {
      //     // radius -= 0.5;
      //     // if(radius == 10){
      //     radius2 = 20;
      //     // }
      //   }
      // };
      // 绘制圆形的方法
      // Circle.prototype.paint = function () {
      //   context.beginPath();
      //   context.arc(this.xx, this.yy, 5, 0, Math.PI * 2);
      //   context.fillStyle = "rgba(220,20,60,1)"; //填充颜色,默认是黑色
      //   context.fill(); //画实心圆
      //   context.closePath();
      //   context.lineWidth = 2; //线条宽度
      //   context.strokeStyle = "rgba(220,20,60,1)"; //颜色
      //   context.stroke();
      //   // this.paintkong();
      //   this.paintkong(0);
      //   // this.paintkong(5);
      //   // this.paintkong(10);
      // };
      // Circle.prototype.paintkong = function (num) {
      //   context.beginPath();
      //   context.arc(this.xx, this.yy, this.radius + num, 0, Math.PI * 2);
      //   context.closePath();
      //   context.lineWidth = 1; //线条宽度
      //   context.strokeStyle = "rgba(220,20,60,1)"; //颜色
      //   context.stroke();
      // };
      // var newfun = null;
      // function createCircles() {
      //   newfun = new Circle(50, 50, radius); //调用构造函数
      //   newfun.paint();
      //   newfun.radiu();
      // }
      // canvas.width = 100; //
      // canvas.height = 100;
      // var width = 100,
      //   height = 100;
      // var backCanvas = document.createElement("canvas"),
      //   backCtx = backCanvas.getContext("2d");
      // backCanvas.width = width;
      // backCanvas.height = height;
      //设置主canvas的绘制透明度
      // context.globalAlpha = 0.7;
      //显示即将绘制的图像，忽略临时canvas中已存在的图像
      // backCtx.globalCompositeOperation = "copy";
      // let render = function () {
      //先将主canvas的图像缓存到临时canvas中
      // backCtx.drawImage(canvas, 0, 0, width, height);
      //清除主canvas上的图像
      // context.clearRect(0, 0, width, height);
      //在主canvas上画新圆
      // createCircles();
      //新圆画完后，再把临时canvas的图像绘制回主canvas中
      // context.drawImage(backCanvas, 0, 0, width, height);
      // };
      // setInterval(render, 100);
      // var canvas = document.querySelector("canvas")
      // var context = canvas.getContext('2d')
      var flag = true;
      var timer = 500;
      var bR = 30;
      // 创建内圆和外圆
      function createBall(r) {
        context.lineWidth = 0.2 * r; //线条宽度
        ball(r, outColor);
        ball(r * 0.5, innerColor);
      }
      // 根据传入的 半径和颜色  画出圆环
      function ball(r, color) {
        context.beginPath();
        context.arc(x, y, r, 0, Math.PI * 2, true);
        context.strokeStyle = color;
        context.stroke();
        context.closePath();
      }

      /*  清除画布指定区域内容*/
      function clearRect(r) {
        var w = 0.3 * r;
        var distance = r + w / 2;
        context.clearRect(
          x - distance,
          y - distance,
          distance * 2,
          distance * 2
        );
      }
      setInterval(function () {
        if (r >= bR * 2 || r <= 0.5 * bR) {
          // r = bR
          flag = !flag;
        }
        clearRect(r + 2);
        if (flag) {
          createBall((r *= 2));
        } else {
          createBall((r /= 2));
        }
      }, timer);
      return canvas;
    },  
    getP1Img(){
      console.log(123123)
      // 创建小车图标
      var myIcon = new BMapGL.Icon(p1, new BMapGL.Size(52, 26));
      // 创建Marker标注，使用小车图标
      var pt = new BMapGL.Point(108.972911, 34.230771);
      var marker = new BMapGL.Marker(pt, {
          icon: myIcon
      });
      // 将标注添加到地图
      this.map.addOverlay(marker);
    },
    getP1Point() {
      this.p1AddrssList.forEach((item) => {
        let poi = new BMapGL.Point(item.x, item.y);
        var customOverlay = new BMapGL.CustomOverlay(this.createDOM2, {
          point: poi,
          offsetX: 0,
          offsetY: 0,
          minZoom: 13,
          maxZoom: 19,
          properties: {
            width: 50,
            height: 50,
            radius: 50,
            lineWidth: 20,
            data: 2,
          },
        });
        this.map.addOverlay(customOverlay);
      });
    },
    getP2Line() {
      var view = new mapvgl.View({
        map: this.map,
      });
      var lineLayer = new mapvgl.LineRainbowLayer({
        style: "arrow", // road, arrow, normal
        width: 10,
        color: [
          "#00f",
          "#00f",
          "#0af",
          "#0a0",
          "#00f",
          "#00f",
          "#0af",
          "#0a0",
          "#00f",
          "#00f",
          "#0af",
          "#0a0",
        ],
      });

      lineLayer.setData(this.p2AddrssListColor);
      view.addLayer(lineLayer);
    },
    listenZoomend() {
      let vthis = this;
      this.map.addEventListener("zoomend", function (e) {
        let zoomNum = e.srcElement.zoomLevel;
        vthis.zoom = zoomNum;
        if (Math.floor(zoomNum) == 17) {
          vthis.getP1Point();
          // alert('这是18级图层')
        }
        if (Math.floor(zoomNum) == 15) {
          //   vthis.getP2Line();
          // alert('这是15级图层')
        }
        // console.log(this.zoomLev)
        // console.log(123,e.srcElement.zoomLevel)
        // var ZoomNum = this.map.getZoom();
        // console.log(ZoomNum)
      });
    },
    getP3Window() {
      var marker = new BMapGL.Marker(new BMapGL.Point(108.934679, 34.210952));
      this.map.addOverlay(marker);
      var sContent = `
        <div style='width:190px;text-align: center;margin-top: 0px;'>天安门</div>
        <div style='color:white'><span>设备名称:<span/><span>管线<span/></div>
        <div style='color:white'><span>设备位置:<span/><span>雁塔区大寨路<span/></div>
        <div style='color:white'><span>所属线路:<span/><span>管线运营一号线<span/></div>
        <div style='color:white'><span>故障率:<span/><span>20%<span/></div>
        <div style='color:white'><span>数据更新时间:<span/><span>2023-03-21 11:50<span/></div>
        <div style='width:190px;height:120px'><img id='imgDemo' style='height:100%;width:100%' src="https://img1.baidu.com/it/u=2779731480,2283690868&fm=253&fmt=auto&app=138&f=JPEG?w=542&h=500" alt=""></div>
      `;
      var infoWindow = new BMapGL.InfoWindow(sContent);
      console.log('marker',marker)
      marker.addEventListener("click", function () {
        this.openInfoWindow(infoWindow);
        var dom = document.getElementById("imgDemo");
        console.log("dom", dom);
        dom.onload = function () {
          infoWindow.redraw();
        };
      });
    },
    getTable1() {
      let table1 = document.getElementById("table1");
      let myChart = this.$echarts.init(table1);
      let option = {
        title: {
          text: "日流量时间记录",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["日流量", "同比", "环比"],
          top: 13,
          right: 13,
          textStyle: {
            color: "#fff",
          },
          // padding:5
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 下载图标
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1",
            "3",
            "5",
            "7",
            "9",
            "11",
            "13",
            "15",
            "17",
            "19",
            "21",
            "23",
          ],
          axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
        },
        yAxis: {
          type: "value",
          axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
        },
        series: [
          {
            name: "日流量",
            type: "line",
            // stack: "Total",
            data: [1, 5, 2, 3, 5, 6, 8, 5, 6, 8, 3, 4],
          },
          {
            name: "同比",
            type: "line",
            // stack: "Total",
            data: [3, 5, 6, 8, 5, 6, 1, 5, 2, 3, 8, 3],
          },
          {
            name: "环比",
            type: "line",
            // stack: "Total",
            data: [8, 5, 6, 1, 5, 2, 3, 8, 3, 6, 1, 5],
          },
        ],
      };
      myChart.setOption(option);
    },
    getTable2() {
      let table2 = document.getElementById("table2");
      let myChart = this.$echarts.init(table2);
      let option = {
        title: {
          text: "日压力时间记录",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["日压力", "同比", "环比"],
          textStyle: {
            color: "#fff",
          },
          top: 13,
          right: 13,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 下载图标
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1",
            "3",
            "5",
            "7",
            "9",
            "11",
            "13",
            "15",
            "17",
            "19",
            "21",
            "23",
          ],
          axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
        },
        yAxis: {
          type: "value",
          axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
        },
        series: [
          {
            name: "日压力",
            type: "line",
            // stack: "Total",
            data: [1, 5, 2, 3, 5, 6, 8, 5, 6, 8, 3, 4],
          },
          {
            name: "同比",
            type: "line",
            // stack: "Total",
            data: [3, 5, 6, 8, 5, 6, 1, 5, 2, 3, 8, 3],
          },
          {
            name: "环比",
            type: "line",
            // stack: "Total",
            data: [8, 5, 6, 1, 5, 2, 3, 8, 3, 6, 1, 5],
          },
        ],
      };
      myChart.setOption(option);
    },
    getTable3() {
      let table3 = document.getElementById("table3");
      let myChart = this.$echarts.init(table3);
      let option = {
        title: {
          text: "设备类型占比",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        legend: {
          top: "bottom",
          textStyle: {
            color: "#fff",
          },
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [20, 80],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 2,
            },
            data: [
              { value: 40, name: "管线" },
              { value: 38, name: "阀门" },
              { value: 32, name: "水泵" },
              { value: 30, name: "水表" },
              { value: 28, name: "水源" },
              { value: 26, name: "其他" },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    getTable4() {
      let table4 = document.getElementById("table4");
      let myChart = this.$echarts.init(table4);
      let option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        title: {
          text: "设备异常情况",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["正常", "故障"],
          top: 13,
          right: 13,
          textStyle: {
            color: "#fff",
          },
        },
        // 下载等图标
        // toolbox: {
        //   show: true,
        //   orient: "vertical",
        //   left: "right",
        //   top: "center",
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar", "stack"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["设备异常", "设备告警", "故障缺陷"],
            axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "正常",
            type: "bar",
            barGap: 0,
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301],
            itemStyle: {
              normal: {
                //这里是重点
                color: "#00FF5E",
              },
            },
          },
          {
            name: "故障",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191],
            itemStyle: {
              normal: {
                //这里是重点
                color: "#FA5151",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    getBottomTable() {
      let monTraffic = document.getElementById("monTraffic");
      let myChart = this.$echarts.init(monTraffic);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "5%",
          left: "2%",
          right: "3%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: [3, 2, 2, 1, 6, 4, 2, 2, 2, 1, 6, 4],
            itemStyle: {
              normal: {
                //这里是重点
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#FFE850 ",
                    "#FFE850 ",
                    "#FFE850 ",
                    "#FFE850 ",
                    "#FFE850 ",
                    "#FFE850 ",
                    "#FFE850 ",
                    "#FFE850 ",
                    "#FFE850 ",
                    "#FFE850 ",
                    "#FFE850 ",
                    "#FFE850 ",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  watch: {
    zoom: {
      handler(newVal, oldVal) {
        console.log("newVal", newVal);
        console.log("oldVal", oldVal);
      },
    },
  },
  mounted() {
    (this.map = new BMapGL.Map("container")), console.log(this.map);
    this.map.setMapStyleV2({styleJson})
    var point = new BMapGL.Point(108.965836, 34.225607);
    this.map.centerAndZoom(point, 13);
    this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    this.getP1Img()
    // this.getP1Point();
    this.getP2Line();
    this.getP3Window();
    this.getTable1();
    this.getTable2();
    this.getTable3();
    this.getTable4();
    this.getBottomTable();
    this.listenZoomend();
    console.log(this.map.getOverlays())
    setTimeout(()=>{
      console.log(1,this.map.getOverlays()[0])
      this.map.removeOverlay(this.map.getOverlays())
    },3000)
  },
};
</script>

<style lang="less" scoped>
::v-deep .BMap_bubble_pop {
  background-color: rgba(24, 76, 86, 0.8) !important;
  width: 190px !important;
}
::v-deep .BMap_bubble_top {
  width: 190px !important;
  padding: 0 !important;
}
::v-deep .BMap_bubble_center {
  display: flex;
  flex-direction: column;
}
.map {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  #container {
    border-radius: 10px;
    height: 100%;
    width: 49.5%;
  }
  .gisMapRight {
    border-radius: 10px;
    width: 49.5%;
    height: 100%;
    // background-color: transparent;
    .ticketList {
      width: 100%;
      height: 130px;
      // background-color: black;
      display: flex;
      justify-content: space-between;
      .card {
        width: 32%;
        height: 100%;
        background-color: #002127;
        border-radius: 20px;
        display: flex;
        color: white;
        .titleAndTings {
          margin-left: 13px;
          margin-top: 13px;
          font-size: 16px;
          p {
            font-size: 40px;
            margin: 0;
            margin-top: 15px;
          }
        }
        .tickePic {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          background-color: white;
          margin-top: 36px;
          margin-left: 20%;
        }
      }
    }
    .middleList {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .table_1 {
        border-radius: 20px;
        width: 49%;
        height: 255px;
        // background-color: black;
        margin-top: 19px;
      }
      #table1 {
        background-image: url(../../../assets/bcp1.png);
        background-size: 100% 100%;
      }
      #table2 {
        background-image: url(../../../assets/bcp2.png);
        background-size: 100% 100%;
      }
      #table3 {
        background-size: 100% 100%;
        background-image: url(../../../assets/bcp1.png);
      }
      #table4 {
        background-size: 100% 100%;
        background-image: url(../../../assets/bcp2.png);
      }
    }
    .monTraffic {
      margin-top: 19px;
      border-radius: 20px;
      background-color: #0c323a;
      width: 100%;
      height: calc(100% - 697px);
    }
  }
}
.radar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  .ripple {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    animation: ripple 2s linear infinite;
  }
}
@keyframes ripple {
  to {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}
.radar :nth-child(1) {
  animation-delay: 0.666s;
}
.radar :nth-child(2) {
  animation-delay: 1.322s;
}
</style>